import { Button, Card, Form, Input, Switch } from 'antd-mobile'
import Nabar from './Nabar'

/**
 * 地址管理组件
 * 用于添加和管理收货地址信息
 */
/**
 * 收货地址添加页面组件
 * 提供用户添加收货地址的表单界面
 */
function address() {
    // 使用Form.useForm()创建表单实例
    const [form] = Form.useForm()
    // 表单提交处理函数
    const onFinish = (values: any) => {
        console.log(values)
    }
    return (
        <div>
            {/* 顶部导航栏 */}
            <div>
                <Nabar title='收货地址-添加'></Nabar>
            </div>
            {/* 地址信息表单 */}
            <div>
                <Form
                    form={form}                  // 绑定表单实例
                    onFinish={onFinish}         // 提交表单时的回调函数
                    layout='horizontal' mode='card'
                    footer={
                        <Button block type='submit' color='primary' size='large'
                            style={{ position: 'absolute', bottom: 0, left: 0, width: '100%' }}
                        >提交</Button>
                    }
                >
                    <Form.Item label='收件人：'>
                        <Input placeholder='请输入姓名' />
                    </Form.Item>
                    <Form.Item label='手机号码：'>
                        <Input placeholder='请输入手机号码' />
                    </Form.Item>
                    <Form.Item label='所在地区：'>
                        <Input placeholder='请输入所在地区' />
                    </Form.Item>
                    <Form.Item label='详细地址：'>
                        <Input placeholder='请输入详细地址' />
                    </Form.Item>
                </Form>
            </div>
            <div style={{ padding: '10px', marginTop: '-50px' }}>
                <Card title={<div><span>设为默认</span> <span style={{ marginLeft: '200px' }}><Switch /></span></div>} >
                    <div style={{ color: "#999" }}>
                        每次购买时会默认使用地址
                    </div>
                </Card>
            </div>

        </div >
    )
}
export default address